<template>
  <div>
    <process-edit-form
      v-if="showEditSubModal"
      ref="processEditForm"
      :title="title"
      :statusOptions="statusOptions"
      :dictType="dictType"
      @ok="handleUpdate"
      @close="showEditSubModal = false"
    />
    <process-add-form
      v-if="showAddSubModal"
      ref="processAddForm"
      :statusOptions="statusOptions"
      :title="title"
      @ok="getList"
      @close="showAddSubModal = false"
    />
    <a-card :bordered="false">
      <div class="table-operations">
        <div class="table_title">{{ title }}</div>
        <!-- v-hasPermi="['system:dict:add']"  -->
        <a-button type="primary" @click="handleSubAdd()" >
          <a-icon type="plus" />新增
        </a-button>
        <!-- v-hasPermi="['system:dict:remove']" -->
        <a-button type="danger" v-if="!multiple" @click="handleSubDelete" >
          <a-icon type="delete" />删除
        </a-button>
        <a-tooltip title="刷新">
          <a-icon @click="getList" class="action" :type="loading ? 'loading' : 'reload'" />
        </a-tooltip>
      </div>
      <a-table
        :loading="loading"
        rowKey="productionProcessId"
        size="middle"
        :columns="columns"
        :data-source="list"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :pagination="false"
        :bordered="true"
      >
        <span slot="status" slot-scope="text, record">
          <a-badge :status="record.status == '0' ? 'processing' : 'error'" :text=" statusFormat(record) " />
        </span>
        <span slot="createTime" slot-scope="text, record">
          {{ parseTime(record.createTime) }}
        </span>
        <span slot="operation" slot-scope="text, record">
          <!-- <a @click="handleSubUpdate(record)" v-hasPermi="['system:dict:edit']">
            修改
          </a> -->
          <a-divider type="vertical" />
          <a @click="handleSubDelete(record)" v-hasPermi="['system:dict:remove']">
            删除
          </a>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>

import {listBizProductProcessDetail} from '@/api/biz/bizProductProcessDetail'
import ProcessEditForm from './ProcessEditForm'
import ProcessAddForm from './ProcessAddForm'
export default {
  name: 'ProcessIndex',
  props: {
    title: {
      type: String,
      default: '生产工序'
    },
    dataSource: {
      type: Array,
      default: ()=>[]
    }
    
  },
  components: {
    ProcessAddForm,
    ProcessEditForm
  },
  data () {
    return {
      showAddSubModal: false,
      showEditSubModal: false,
      selectedRowKeys: [],
      selectedRows: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      list:[],
      ids: [],
      dictLabels: [],
      loading: false,
      // 状态数据字典
      statusOptions: [],
      queryParam: {
        pageNum: 1,
        pageSize: 100,
        dictName: undefined,
        dictType: undefined,
        status: undefined
      },
      columns: [
        {
          title: '工序名称',
          dataIndex: 'processName',
          ellipsis: true,
          align: 'left',
          width: '20%'
        },
        {
          title: '工序编号',
          dataIndex: 'processCode',
          ellipsis: true,
          align: 'left',
          width: '20%'
        },
        {
          title: '单位加工量',
          dataIndex: 'unitProcessVol',
          align: 'right',
          width: '15%'
        },
        {
          title: '单位工资',
          dataIndex: 'unitSalary',
          align: 'right',
          width: '15%'
        },
        {
          title: '工序排序',
          dataIndex: 'sortNumber',
          align: 'right',
          width: '15%'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          align: 'center',
          width: '25%',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    }
  },
  filters: {
  },
  created () {
    // this.getList()
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data
    })
  },
  computed: {
  },
  watch: {
    dataSource(newValue,oldValue){
      this.list = newValue
    }
  },
  methods: {
    getList (selectedRows) {
      this.showAddSubModal = false
      this.showEditSubModal = false
      this.list = selectedRows || [];
      if(!this.processPlanId && this.list.length) {
        this.list.forEach(item=>{
          item.unitProcessVol=1.00;
          item.productionProcessId = item.id 
          item.id = null
        })
      }
      console.log('this.list :>> ', this.list);
    },
    // 状态字典翻译
    statusFormat (row) {
      return this.selectDictLabel(this.statusOptions, row.status)
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParam.pageNum = 1
      this.getList()
    },
    handleSubAdd () {
      this.showAddSubModal = true
      let processIds = [];
      this.list.forEach(process=>{
        processIds.push(process.id)
      })
      this.$nextTick(() => (
        this.$refs.processAddForm.handleSetProcess(processIds)
      ))
    },
    handleSubUpdate (record) {
      this.showEditSubModal = true
      this.$nextTick(() => (
        this.$refs.processEditForm.handleUpdate(record)
      ))
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = []
      this.queryParam = {
        pageNum: 1,
        pageSize: 10,
        dictName: undefined,
        dictType: undefined,
        status: undefined
      }
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.ids = this.selectedRows.map(item => item.id)
      this.dictLabels = this.selectedRows.map(item => item.dictLabel)
      this.single = selectedRowKeys.length !== 1
      this.multiple = !selectedRowKeys.length
    },
    /** 删除按钮操作 */
    handleSubDelete (row) {
      var that = this
      this.$confirm({
        title: '确认删除所选中数据?',
        onOk () {
          let selectedList = JSON.parse(JSON.stringify(that.list));
          selectedList.forEach((item,index)=>{
            if(row.id) {
              that.list= that.list.filter(item => item.id!=row.id)
              return;
            } else {
              that.selectedRows.forEach(item2=>{
                that.list= that.list.filter(item => item.id!=item2.id)
                return;
              })
            }
          })
          that.$message.success(
            '删除成功',
            3
          )
          that.onSelectChange([], [])
          return;
        },
        onCancel () {}
      })
    },
    handleUpdate(obj) {
      this.list.forEach(item=>{
        if(item.id==obj.id) {
          item.unitSalary=obj.unitSalary;
          item.unitProcessVol=obj.unitProcessVol;
          item.sortNumber=obj.sortNumber;
          this.$forceUpdate();
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table-operations, body tr.ant-table-expanded-row:hover .table-operations {
  padding-bottom: 8px;
  text-align: right;
}
.table-operations {
  margin-bottom: 16px;
}
.table-operations > button,
.table-operations .ant-input-affix-wrapper{
  margin-right: 8px;
}
.table_title {
  float: left;
  padding-left: 8px;
  font-weight: 600;
  color: #222222;
  line-height: 30px;
}
</style>
